<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="660px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属案件" prop="caseId">
            <el-select
              v-model="formData.caseId"
              placeholder="请选择所属案件"
              clearable
            >
              <el-option
                v-for="item in caseList"
                :key="item.id"
                :label="item.caseName"
                :value="item.id"
              />
            </el-select> </el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model.trim="formData.name"
              placeholder="请输入涉案人姓名"
              :maxlength="50"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="zjh">
            <el-input
              v-model.trim="formData.zjh"
              placeholder="请输入身份证号"
              :maxlength="50"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话" prop="tel">
            <el-input
              v-model.trim="formData.tel"
              placeholder="请输入涉案人联系电话"
              :maxlength="50"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标注类型" prop="tagType">
            <el-select
              class="input"
              v-model="formData.tagType"
              placeholder="请选择人员标注类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.tag_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              /> </el-select
          ></el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="户籍地址" prop="residenceAddress">
        <el-input
          v-model.trim="formData.residenceAddress"
          placeholder="请输入涉案人户籍地址"
          :maxlength="50"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="居住地址" prop="liveAddress">
        <DictionarySelect
          source="xzqhbm"
          style="width: 31%"
          v-model="formData.oucodeList[0]"
        />
        <DictionarySelect
          :source="formData.oucodeList[0]"
          style="width: 31%; margin-left: 15px"
          v-model="formData.oucodeList[1]"
        />
        <DictionarySelect
          :source="formData.oucodeList[1]"
          style="width: 31%; margin-left: 14px"
          v-model="formData.oucodeList[2]"
        />
      </el-form-item>
      <el-form-item label="具体地址" prop="residenceAddress">
        <el-input
          v-model.trim="formData.residenceAddress"
          placeholder="请输入涉案人具体地址"
          :maxlength="50"
          clearable
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
        <el-button class="searchButton" @click="submitForm">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import DictionarySelect from "../../../layout/components/dictionnary/DictionarySelect.vue";
import { MODALTYPE, MODALIMG, CASEDEFAULTSTATE } from "../../../utils/variable";
import { onlyNumber } from "../../../utils/commonMethods";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getInfo, addInvoved } from "@/api/invovedPerson/invovedPerson";
import { getCaseList } from "@/api/caseManage/case";
export default {
  dicts: ["tag_type"],
  inheritAttrs: false,
  components: { Treeselect, DictionarySelect },
  props: {
    modalType: {
      type: String,
      require: true,
    },
    id: {
      type: Number,
    },
  },
  data() {
    //人员重复校验
    // var checkZjh = (rule, value, callback) => {
    //   if (!value) {
    //     callback(new Error("身份证号不能为空"));
    //   } else if (this.modalType == MODALTYPE["新增"]) {
    //     let params = {
    //       zjh: this.formData.zjh,
    //     };
    //     validNumber(params).then((response) => {
    //       if (response.data === 1) {
    //         callback(new Error("该案件下已有此人员！"));
    //       } else {
    //         callback();
    //       }
    //     });
    //   } else if (this.modalType == MODALTYPE["修改"]) {
    //     if (this.temZjh !== this.formData.zjh) {
    //       let params = {
    //         zjh: this.formData.zjh,
    //       };
    //       validNumber(params).then((response) => {
    //         if (response.data === 1) {
    //           callback(new Error("该案件下已有此人员！"));
    //         } else {
    //           callback();
    //         }
    //       });
    //     } else {
    //       callback();
    //     }
    //   } else {
    //     callback();
    //   }
    // };
    var zjhValidator = (rule, value, callback) => {
      if (!value) {
        callback(new Error("身份证号不能为空"));
      } else {
        const reg =
          /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
        const card = reg.test(value);
        if (!card) {
          callback(new Error("身份证号格式错误！"));
        } else {
          callback();
        }
      }
    };
    return {
      caseList: [], //案件列表
      temZjh: "", //暂存身份证号
      isDisabled: false,
      // 弹出层标题
      title: "",

      // 是否显示弹出层
      open: false,
      formData: {
        caseId: "",
        name: "",
        zjh: "",
        tel: "",
        residenceAddress: "",
        liveAddress: "",
        tagType: "",
        oucodeList: ["省", "市", "区县"],
      },
      rules: {
        tel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        caseId: [
          {
            required: true,
            message: "请选择所属案件",
            trigger: "change",
          },
        ],
        zjh: [
          {
            required: true,
            trigger: "blur",
            validator: zjhValidator,
          },
        ],
        involvedPeople: [
          {
            required: true,
            message: "请输入涉案人数",
            trigger: "blur",
          },
        ],
        needMoney: [
          {
            required: true,
            message: "请输入应发放金额(元)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    resetButtonContent() {
      if (this.modalType == MODALTYPE["详情"]) {
        return "关闭";
      } else {
        return "取消";
      }
    },
  },
  watch: {
    modalType: {
      handler(value) {
        console.log(value);
        if (value == MODALTYPE["新增"]) {
          this.reset();
          this.getCase();
          this.open = true;
          this.title = "新增涉案人员";
        } else if (value == MODALTYPE["修改"]) {
          this.reset();
          this.getCase();
          if (this.id) {
            getCase(this.id).then((response) => {
              this.formData = response.data;
              this.temZjh = this.formData.zjh;
              this.open = true;
              this.title = "修改涉案人员";
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    onlyNumber,
    //获取所有案件列表
    getCase() {
      let params = {
        oucode: this.$store.state.user.oucode,
      };
      getCaseList(params).then((response) => {
        this.caseList = response.data;
        console.log(this.caseList);
      });
    },
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", "");
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        caseId: "",
        name: "",
        zjh: "",
        tel: "",
        residenceAddress: "",
        liveAddress: "",
        tagType: "",
        oucodeList: ["省", "市", "区县"],
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.modalType == MODALTYPE["修改"]) {
            addInvoved(this.formData).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit("update:modalType", "");
              // this.$parent.getList();
              this.$emit("fatherMethod");
            });
          } else if (this.modalType == MODALTYPE["新增"]) {
            addInvoved(this.formData).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit("update:modalType", "");
              this.$emit("fatherMethod");
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/dialog.scss"; //模态框样式

::v-deep.treeselect {
  font-size: 12px !important;
  font-family: $font-family !important;
  font-weight: $form-label-font-weight !important;
}
.addressSelect {
  width: 140px !important;
  margin-right: 10px !important;
}
</style>
